<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>消防报警系统</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body {
            padding-top: 20px;
            background-color: #f5f5f5;
        }
        .alarm-card {
            margin-bottom: 15px;
            border-left: 5px solid #dc3545;
        }
        .fault-card {
            margin-bottom: 15px;
            border-left: 5px solid #ffc107;
        }
        .normal-card {
            margin-bottom: 15px;
            border-left: 5px solid #198754;
        }
        .alarm-header {
            background-color: rgba(220, 53, 69, 0.1);
        }
        .fault-header {
            background-color: rgba(255, 193, 7, 0.1);
        }
        .normal-header {
            background-color: rgba(25, 135, 84, 0.1);
        }
        .status-badge {
            font-size: 0.9rem;
        }
        .alarm-time {
            font-size: 0.8rem;
            color: #6c757d;
        }
        .system-status {
            padding: 15px;
            border-radius: 5px;
            margin-bottom: 20px;
        }
        .status-normal {
            background-color: rgba(25, 135, 84, 0.1);
        }
        .status-alarm {
            background-color: rgba(220, 53, 69, 0.1);
            animation: blink 1s infinite;
        }
        .status-fault {
            background-color: rgba(255, 193, 7, 0.1);
        }
        @keyframes blink {
            0% { opacity: 1; }
            50% { opacity: 0.5; }
            100% { opacity: 1; }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1 class="text-center mb-4">消防报警系统</h1>
        
        <!-- 系统状态 -->
        <div id="system-status" class="system-status status-normal mb-4">
            <div class="row">
                <div class="col-md-6">
                    <h4>系统状态: <span id="status-text">正常</span></h4>
                </div>
                <div class="col-md-6 text-end">
                    <span class="badge bg-danger me-2">火警: <span id="fire-count">0</span></span>
                    <span class="badge bg-warning text-dark me-2">故障: <span id="fault-count">0</span></span>
                    <span class="badge bg-secondary">其他: <span id="other-count">0</span></span>
                </div>
            </div>
        </div>
        
        <!-- 报警事件列表 -->
        <div class="row">
            <div class="col-md-12">
                <h3>报警事件</h3>
                <div id="alarm-list" class="mt-3">
                    <!-- 报警事件将在这里动态添加 -->
                    <div class="alert alert-info">暂无报警事件</div>
                </div>
            </div>
        </div>
    </div>

    <!-- JavaScript 库 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sockjs-client@1.5.2/dist/sockjs.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/stompjs@2.3.3/lib/stomp.min.js"></script>
    <script>
        // 存储当前活跃的报警事件
        const activeAlarms = new Map();
        let stompClient = null;

        // 页面加载完成后执行
        $(document).ready(function() {
            // 连接WebSocket
            connectWebSocket();
            
            // 加载当前活跃的报警事件
            loadActiveAlarms();
            
            // 加载系统状态
            loadSystemStatus();
            
            // 每30秒刷新一次系统状态
            setInterval(loadSystemStatus, 30000);
        });

        // 连接WebSocket
        function connectWebSocket() {
            const socket = new SockJS('/ws');
            stompClient = Stomp.over(socket);
            
            stompClient.connect({}, function(frame) {
                console.log('WebSocket连接成功: ' + frame);
                
                // 订阅报警事件主题
                stompClient.subscribe('/topic/alarms', function(message) {
                    const event = JSON.parse(message.body);
                    handleAlarmEvent(event);
                });
            }, function(error) {
                console.error('WebSocket连接失败: ' + error);
                // 5秒后尝试重新连接
                setTimeout(connectWebSocket, 5000);
            });
        }

        // 加载当前活跃的报警事件
        function loadActiveAlarms() {
            $.ajax({
                url: '/api/fire-alarm/active-alarms',
                type: 'GET',
                success: function(data) {
                    // 清空报警列表
                    $('#alarm-list').empty();
                    
                    if (data.length === 0) {
                        $('#alarm-list').append('<div class="alert alert-info">暂无报警事件</div>');
                        return;
                    }
                    
                    // 添加报警事件
                    data.forEach(function(event) {
                        addAlarmToList(event);
                        activeAlarms.set(event.id, event);
                    });
                },
                error: function(error) {
                    console.error('加载报警事件失败: ', error);
                }
            });
        }

        // 加载系统状态
        function loadSystemStatus() {
            $.ajax({
                url: '/api/fire-alarm/system-status',
                type: 'GET',
                success: function(data) {
                    updateSystemStatus(data);
                },
                error: function(error) {
                    console.error('加载系统状态失败: ', error);
                }
            });
        }

        // 处理报警事件
        function handleAlarmEvent(event) {
            // 根据事件类型处理
            if (event.componentStatus === 0) { // 正常状态
                // 移除报警事件
                activeAlarms.delete(event.id);
                $(`#alarm-${event.id}`).remove();
                
                // 如果没有报警事件，显示提示信息
                if (activeAlarms.size === 0) {
                    $('#alarm-list').html('<div class="alert alert-info">暂无报警事件</div>');
                }
            } else {
                // 添加或更新报警事件
                activeAlarms.set(event.id, event);
                
                // 如果是第一个报警事件，清空提示信息
                if (activeAlarms.size === 1) {
                    $('#alarm-list').empty();
                }
                
                // 添加报警事件到列表
                addAlarmToList(event);
            }
            
            // 更新系统状态
            loadSystemStatus();
        }

        // 添加报警事件到列表
        function addAlarmToList(event) {
            // 移除已存在的相同ID的事件
            $(`#alarm-${event.id}`).remove();
            
            // 根据事件类型设置样式
            let cardClass = 'normal-card';
            let headerClass = 'normal-header';
            let badgeClass = 'bg-success';
            let statusText = '正常';
            
            if (event.eventType === 1) { // 火警
                cardClass = 'alarm-card';
                headerClass = 'alarm-header';
                badgeClass = 'bg-danger';
                statusText = '火警';
            } else if (event.eventType === 2) { // 故障
                cardClass = 'fault-card';
                headerClass = 'fault-header';
                badgeClass = 'bg-warning text-dark';
                statusText = '故障';
            }
            
            // 格式化时间
            const occurTime = new Date(event.occurTime).toLocaleString();
            
            // 创建报警事件卡片
            const card = `
                <div id="alarm-${event.id}" class="card ${cardClass} mb-3">
                    <div class="card-header ${headerClass} d-flex justify-content-between align-items-center">
                        <span>${event.description}</span>
                        <span class="badge ${badgeClass} status-badge">${statusText}</span>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <p class="mb-1"><strong>设备地址:</strong> ${event.deviceAddress}</p>
                                <p class="mb-1"><strong>部件地址:</strong> ${event.componentAddress}</p>
                            </div>
                            <div class="col-md-6 text-end">
                                <p class="alarm-time mb-0">发生时间: ${occurTime}</p>
                            </div>
                        </div>
                    </div>
                </div>
            `;
            
            // 添加到列表开头
            $('#alarm-list').prepend(card);
        }

        // 更新系统状态
        function updateSystemStatus(data) {
            // 更新计数
            $('#fire-count').text(data.fireAlarms);
            $('#fault-count').text(data.faults);
            $('#other-count').text(data.others);
            
            // 更新状态文本
            $('#status-text').text(data.status);
            
            // 更新状态样式
            const statusDiv = $('#system-status');
            statusDiv.removeClass('status-normal status-alarm status-fault');
            
            if (data.fireAlarms > 0) {
                statusDiv.addClass('status-alarm');
            } else if (data.faults > 0) {
                statusDiv.addClass('status-fault');
            } else {
                statusDiv.addClass('status-normal');
            }
        }
    </script>
</body>
</html>